<template>
    <div>
        <!-- <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" /> -->

        <div class="h-screen flex justify-center">
            <div class="w-full flex flex-col p-2 pt-4">

                <!-- 订单列表 -->
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="! isEmpty">
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                        <div class="order-item" v-for="item in list" :key="item.giftOrderId">
                            <!-- 上下两部分 上面是商品图片+右边标题订单时间状态-->
                            <div class="order-item-top van-hairline--bottom pb-4" v-for="prod in item.itemList" :key="item.giftOrderId">
                                <div class="order-item-img">
                                    <img :src="prod.productThumb" alt="">
                                </div>
                                <div class="order-item-right">
                                    <div class="order-item-title font-bold">
                                        {{prod.productTitle}}
                                    </div>
                                    <div class="order-item-time pt-1">订单时间：
                                        {{item.createTime}}
                                    </div>
                                    <div class="order-item-status">订单状态：
                                        <!-- 审核状态 0 待发货 1 已发货 2 已完成 -->
                                        <template v-if="item.statusFlag == 0">待发货</template>
                                        <template v-else-if="item.statusFlag == 1">已发货</template>
                                        <template v-else-if="item.statusFlag == 2">已完成</template>
                                    </div>
                                    <div class="order-item-status">物流信息：
                                        {{item.logisticsCompany}}
                                    </div>
                                    <div class="order-item-status-num">{{item.logisticsNumber}}</div>
                                </div>
                            </div>
                            <!-- 收货地址-->
                            <div class="order-item-address pt-4">
                                <div class="order-item-address-content pb-1">
                                    <van-icon name="contact-o" size="1.1rem"/>
                                    {{item.receiveName}} {{item.receivePhone}} </div>
                                <div class="order-item-address-content pb-1" style="padding-left: 1.2rem;">{{item.receiveAddress}}</div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>

                <!-- 空状态 -->
                <!-- 空状态 -->
                <van-empty image="http://img.daguohaoli.com.cn/order-empty-image.png" :image-size="[160, 160]" v-if="isEmpty">
                    <template #description>
                        <view class="title">您还没有相关的订单</view>
                        <view class="desc">可以去看看有哪想兑换的</view>
                    </template> 
                    <van-button round plain hairline block type="primary" class="bottom-button"  @click="goHome" >去看看</van-button>
                </van-empty>
            </div>
        </div>

    </div>
</template>

<script setup name="GiftOrder">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const $router = useRouter();
import { CommonApi } from '@/api/CommonApi';

const list = ref([]);
const loading = ref(false);

const finished = ref(false);

// onRefresh
const refreshing = ref(false);

// onRefresh
const onRefresh = () => {
    getOrderList();
    refreshing.value = false;
};

// 空数据图片 order-empty-image.png
// 是否为空
const isEmpty = ref(false);


// 我的订单
const title = '我的订单';

// 返回 
const onClickLeft = () => {
    history.back();
}

// 到gift
const goHome = () => {
    $router.push('/gift');
}


// getOrderList
onMounted(() => {
    getOrderList();
});

// 获取订单数据
const getOrderList = () => {
    // 获取订单列表
    CommonApi.getOrderList().then(res => {
        list.value = res.data.rows;
        isEmpty.value = false;
        if (list.value.length == 0) {
            isEmpty.value = true;
        }
        finished.value = true;
    });
};


</script>

<style lang="less">
body {
    background: #f5f5f5;
}


.order-item {
    background: #fff;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 9px;

    .order-item-top {
        display: flex;

        .order-item-img {
            width: 7rem;
            height: 7rem;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .order-item-right {
            flex: 1;
            padding-left: 1rem;
            box-sizing: border-box;

            .order-item-title {
                font-size: 1rem;
                color: #262626;
                height: 1.5rem;
                overflow: hidden;
            }

            .order-item-time {
                font-size: 0.9rem;
                color: #262626;
            }

            .order-item-status {
                font-size: 0.9rem;
                color: #262626;
            }
            .order-item-status-num{
                font-size: 0.9rem;
                text-indent: 4.75rem;
            }
        }
    }

    .order-item-address {
        .order-item-address-title {
            font-size: 0.9rem;
            color: #a0a0a0;
        }

        .order-item-address-content {
            font-size: 0.9rem;
            color: #a0a0a0;
        }
    }
}

.van-empty__bottom {
    width: 100%;
    box-sizing: border-box;
    padding: var(--van-address-edit-padding);
}

.bottom-button {
    height: 40px;
    margin-bottom: 0.5rem;
    background: #F6F6F6 !important;
    color: #9f9f9f !important;
    border: 0.01rem solid #9f9f9f !important;
}

.van-empty {
    margin-top: 2rem;
}

.title {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 2rem;
    color: #898989;
    // margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
}

.desc {
    font-size: 0.9rem;
    color: #AFAFAF;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>